import { useState } from 'react';
import { Button, Upload, Row, Col } from 'antd';
import { upload } from "../../service/apis.ts";
import { UploadOutlined } from '@ant-design/icons';

export const FileUpload = () => {
    const [file, setFile] = useState(null);
    const [uploading, setUploading] = useState(false);

    const handleFileChange = (info: any) => {
        setFile(info.file);
    };

    const handleUpload = async () => {
        if (!file) {
            alert('请选择一个文件');
            return;
        }

        setUploading(true);

        const formData = new FormData();
        formData.append('file', file);

        try {
            const response = await upload(formData);
            console.log('File uploaded successfully:', response);
        } catch (error) {
            console.error('Error uploading file:', error);
        } finally {
            setUploading(false);
        }
    };

    return (
        <div>
            <h3>知识库训练上传</h3>
            <Row gutter={16}>
                <Col>
                    <Upload beforeUpload={() => false} onChange={handleFileChange}>
                        <Button icon={<UploadOutlined />}>选择文件</Button>
                    </Upload>
                </Col>
                <Col>
                    <Button type="primary" onClick={handleUpload} disabled={uploading}>
                        {uploading ? '上传中...' : '上传'}
                    </Button>
                </Col>
            </Row>
        </div>
    );
};